<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/stylesheets/page2.css" media="screen" />
<link rel="stylesheet" href="/stylesheets/common.css" media="screen" />
<link rel="stylesheet" href="/stylesheets/page0.css" media="screen" />
<title></title>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
</head>
<body background="images/Backgournd.png" style="width: 1280px ;height: 720px;background-color: rgba(67, 84, 106, 0.8);>
<div id="loading_view" style="width: 1280px;height: 720px;background-color: rgba(67, 84, 106, 0.8);">
	<div id="logo">
		<img src="/images/page0/image_Logo_tv.png" />
	</div>
	<div id="logo_text">
		<img src="/images/page0/Imgae_logo_Text.png" />
	</div>
	<div id="ball1" class="ball"></div>
	<div id="ball2" class="ball"></div>
	<div id="ball3" class="ball"></div>

<div class="page2" id="view" style="visibility: hidden;">
<form action='/page3' method='post'></form>
<div class="page2" id="img_log">
	<img alt="TV&amp;STRETCHING" src="images/page2/logo.png">
</div>
<div id="be_small"class="page2">
	<img alt="줄임 버튼" src="images/page3/Btn_Be-small.png">
</div>

<div class="page2 p2_btn_back" id="btn_pre">
	 <img alt="이전화면" src="images/page2/icon_back.png" class="p2_btn_back_icon"> 
</div>

<div  class="page2" id="img_time">
	<img alt="현재시간" src="images/page2/Time_text.png">
</div>

<div  class="page2" id="time_module">
	<input type="text" value='03:00'class="dial">
</div>

<div  class="page2 p2_btn_timer_control" id="btn_stop" alt='stop'>
	<p>STOP</p>
	<!--<img alt="멈추기" src="images/page2/btn_Stop_timer.png">-->
</div>

<div  class="page2" id="text_title">
	<div class="page2" id="top_img"><img alt="멈추기" src="images/page2/Back_Text_1.png"></div>
	<p></p>
	<div class="page2" id="bottom_img"><img alt="멈추기" src="images/page2/Back_Text_3.png"></div>
</div>

<div  class="page2" id="line1">
	<img src="images/page2/border_Right_line.png">
</div>

<div  class="page2" id="line2">
	<!-- <img src="images/page2/border_Right_line.png"> -->
</div>

<div class="page2" id="img_detaile">
	<div class="page2"   id="img_detail_text_img">
		<img alt="상세 이미지" src="">
		<p alt=''></p>
	</div>
	<div class="page2"  id="img_thumb_nail_1">
		<img alt="섬네일1" src="">
	</div>
	<div class="page2"  id="img_thumb_nail_2">
		<img alt="섬네일2" src="">
	</div>
</div>

<!-- <div class="page2"  id="btn_finish">
	<img alt="앱종료" src="images/page2/AppExit.png">
</div> -->

<div class="page2 p2_btn_pre_next "  id="btn_pre_exer">
	<!-- <img alt="이전 스트레칭" src="images/page2/Btn_Pre_stretching.png"> -->
	<img alt="up" src="">
	<p>이전 스트레칭</p>
</div>

<div  class="page2 p2_btn_pre_next"  id="btn_next_exer">
	<!-- <img alt="다음 스트레칭" src="images/page2/Btn_Next_stretching.png"> -->
	<p>다음 스트레칭</p>
	<img alt="down" src="">
</div>

<div class="page2 p2_btn_go_tv"  id="btn_with_tv">
	<img alt="TV보며하기" src="images/page2/icon_tv.png">
	<div>
	<p id="txt1">TV보면서</p>
	<p id="txt2">스트레칭하기</p>
	</div>
</div>
<input type='hidden' id='loadTest'>

</div>

</body>
<script type="text/javascript">
/* var listSel = <%-JSON.stringify(list)%>;*/
var listSel = <%-JSON.stringify(list)%>;
listSel = listSel.list.split(",");

var commonDb = '';
var imgDetaileText = $('#img_detail_text_img');
var imgTum1 = $('#img_thumb_nail_1');
var imgTum2 = $('#img_thumb_nail_2');
var imgPath = '/images/common/';
var listIdx = 0;
var fullIdx;
var dialTimerText = '03:00';
var min = 3;
var sec = 0;
var dialTimerVal = 0;
fullIdx = listSel.length;

var imgInterval;
var timerInterval;

	$(document).ready(function(){
		$('.dial').knob({
				readOnly : true,
				max : 180,
				width : 150,
				skin : "tron",
				thickness : '.2',
				lineCap : 'round',
				fgColor: "#fc6862",
				inputColor : '#ffffff',
				bgColor : '#293543'
		}).trigger('inter');

		function dialChange(){
			if(dialTimerVal < 300){
				dialTimerVal++;
				$('.dial').val(dialTimerVal).trigger('change');
			}else if(dialTimerVal > 300){
				dialTimerVal = 0;
				$('.dial').val(0).trigger('change');
			}

			if(sec < 10){
				sec = '0' + sec;
			}

			dialTimerText = '0' + min + ':' + sec;
			$('.dial').val(dialTimerText);


		}

		function minTest(){
			if(min > 0 ){
				min--;
			}else if(min < 0){
				min = 60;
			}
		}


		function secTest(){
			if(sec < 60 && sec > 0){
				sec--;
			}else if(sec <= 0 && min != 0){
				sec = 59;
				minTest();
			}else if(sec <= 0 && min == 0){
				$('#btn_next_exer').trigger('click');
			}
			dialChange();

		}

		$('.dial').on('inter', function(){
			secTest();
		});

		/* dial 초기화 */
		function dialNew(){
			 $('.dial').val('03:00');
			 min = 3;
			 sec = 0;
			 dialTimerVal = 0;
		}


	// start
	/*	var interval = setInterval(countdown, 1000);*/



		$.getJSON("/data/db.json", function(data){

        commonDb = data.db;

  	});

		function getDb(idx){
			var result;
				$.each(commonDb, function(){
					if(this.id == listSel[idx]){

						result = this;
					}
				});

			return result;
		}

		function getType(idObj, type){
			var result;
			if(type == 'img'){
				result = idObj.img;
			}else if(type == 'title'){
				result = idObj.title;
			}else if(type == 'detail_Img'){
				result = idObj.detail_Img;
			}else if(type == 'detail_Text'){
				result = idObj.detail_Text;
			}else if(type == 'id'){
				result = idObj.id;
			}
				return result;
		}

		function startTitle(title){
			if($("#text_title > p").text()!=title){
			console.log($("#text_title").text(),title);
				$('#text_title > p').text(title);
			

			if($("#text_title").hasClass("page3_m"))
			{
			 $("#text_title").fadeIn(15000,
				function()
				{
					$("#text_title").fadeOut(5000);
				}
			);
			}
			}
			
			

		}

		function startImg(src){

			if(src.length == 2){
				var textP = $('#img_detail_text_img').find('p');
				if((textP.attr('alt') == '')|| (textP.attr('alt') == '2')){
					imgDetaileText.find('img').attr('src', imgPath + src[0]);
				}else if(textP.attr('alt') == '1') {
					imgDetaileText.find('img').attr('src', imgPath + src[1]);
				}
			}else{
				imgDetaileText.find('img').attr('src', imgPath + src[0]);
			}

			imgTum1.find('img').attr('src', imgPath + src[0]);
			imgTum2.find('img').attr('src', imgPath + src[1]);
			imgChk(imgTum2.find('img'));


		}

		function startTxt(txt){
			/*console.log($('#img_detail_text_img > p'));
			$('#img_detail_text_img > p').text(txt[0]);
			*/
			var textP = $('#img_detail_text_img > p');
			if((textP.attr('alt') == '')|| (textP.attr('alt') == '2')){
				textP.text(txt[0]).attr('alt', '1');
			}else if(textP.attr('alt') == '1') {
				textP.text(txt[1]).attr('alt', '2');
			}


		}

		/* 운동목록 이미지 로직 */
		function imgChk(imgSrc){
			$(imgSrc).show();
			$(imgSrc).error(function(){
				$(this).hide();
			});
		}


		/* 	운동 stop 이벤트 */
		$('#btn_stop').on('click', function(){
				var btnStop = $('#btn_stop');

				var temp = btnStop.attr('alt');
				console.log(temp);
				if(temp == 'stop'){
					btnStop.attr('alt', 'start');
					clearInterval(imgInterval);
					clearInterval(timerInterval);
					$('#btn_stop > p').text("START");
				}else{
					btnStop.attr('alt', 'stop');
					imgInterval = setInterval('$("#loadTest").trigger("loading")',3000);
					timerInterval =	setInterval('$(".dial").trigger("inter")', 1000);
					/* $('#btn_stop > img').attr("src","http:/images/page2/btn_Stop_timer.png"); */
					$('#btn_stop > p').text("STOP");
				}



		});


		$('#btn_pre_exer').on('click', function(){
				if(listIdx > 0){
					listIdx--;
					$('#img_detail_text_img > p').attr('alt', '');
					setList();
					dialNew();
				}
		});

		$('#btn_next_exer').on('click', function(){
				if(listIdx < fullIdx-1){
					listIdx++;
					$('#img_detail_text_img > p').attr('alt', '');
					dialNew();
					setList();
				}
		});

		$('#loadTest').on('click', function(){
			setList();


		});

		function setList(){
			var temp = getDb(listIdx);

			var imgList = getType(temp, "detail_Img");

			startImg(imgList);

			var titlelist = getType(temp, "title");
			startTitle(titlelist);

			var detail_Text = getType(temp, "detail_Text");
			startTxt(detail_Text);

		}



		/*  세부 운동 이름 보여주기 */
		function changeTitle(title){
			var nextPage = pageIdx + 1;
				$(title).each(function(index, ele){
					if(index == pageIdx){
						exer1_1.parents('div').find('div').text(this);
					}else if(index == nextPage){
						exer2_1.parents('div').find('div').text(this);
				}
			});
		}


			$('#btn_pre').on('click', function(){
				$("form").attr({'method':'get', 'action':'/page1'});
				$("form").submit();
			});

			/* 운동 타이머 */
			function strTimer() {
				var temp = getDb(listIdx);
				var detail_Text = getType(temp, "detail_Text");

			}


			$("#btn_with_tv").click(function(){

				 if($("#btn_with_tv").hasClass("page2")){
				 	 $('.dial').trigger('configure', {"width":60}).trigger("inter");
					 $(".page2").addClass("page3");
					 $(".page3").removeClass("page2");
					 $("#txt1").text("크게보기");//임시방편
				    }
				 else{
				 	$('.dial').trigger('configure', {"width":150}).trigger("inter");
					 $(".page3").addClass("page2");
					 $(".page2").removeClass("page3");
					 $("#txt1").text("TV보면서");//임시방편
				 }
		  });
		  
		  $("#be_small").click(function(){

				 if($("#btn_with_tv").hasClass("page3_m")){
				 	 $('.dial').trigger('configure', {"width":60}).trigger("inter");
					 $(".page3_m").addClass("page3");
					 $(".page3").removeClass("page3_m");
					 $("#text_title").fadeIn(1000);
				    }
				 else{
				 	$('.dial').trigger('configure', {"width":150}).trigger("inter");
					 $(".page3").addClass("page3_m");
					 $(".page3_m").removeClass("page3");
					 $("#text_title").fadeOut(5000);
				 }
		  });
		  
		  

			$('#loadTest').on('loading',function(){
				setList();
			});

			

	});

			$(window).load(function(){
				function Timer() {
					setTimeout('$("#loadTest").trigger("click")',10);
					imgInterval = setInterval('$("#loadTest").trigger("loading")',3000);
					timerInterval =	setInterval('$(".dial").trigger("inter")', 1000);
					
					
				}
				Timer();
					$("#loading_view").css("visibility","hidden");
					$("#view").css("visibility","visible");
				
			});
</script>
</html>